<template>
  <div>
    <!-- <el-dialog v-model="dialogVisible" title="Tips" width="50%" :before-close="handleClose">
            <el-form :model="form">
                <el-form-item>
                    <Editor v-model="form.content" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">Cancel</el-button>
                    <el-button type="primary" @click="dialogVisible = false">Confirm</el-button>
                </span>
            </template>
        </el-dialog> -->
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-cascades"></i>
          订单信息
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-input v-model="query.ordername" placeholder="订单名称" class="handle-input mr10"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
      </div>
      <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
        <el-table-column prop="orderid" label="订单ID" width="100" align="center"></el-table-column>
        <el-table-column prop="ordernum" label="订单编号" width="100" align="center"></el-table-column>
        <el-table-column prop="username" label="下单用户名" width="100" align="center"></el-table-column>
        <el-table-column prop="ordername" label="订单名称" width="100" align="center"></el-table-column>
        <el-table-column prop="price" label="订单价格" width="100" align="center"></el-table-column>
        <!-- <el-table-column  prop="orderName" label="订单价格" width="100" align="center"> -->
        <!-- <template #default="scope">
              <el-tag
                :type="
                  scope.row.type == '0'
                    ? 'danger'
                    : scope.row.type == '1'
                    ? 'success'
                    : 'warning'
                "
              >
                {{
                scope.row.type == "0"
                ? "小说"
                : scope.row.type == "1"
                ? "名著"
                : "传记"
                }}
              </el-tag>
            </template> -->
        <!-- </el-table-column> -->
        <el-table-column prop="createdAt" label="下单时间"></el-table-column>
        <el-table-column label="状态" align="center" width="100">
          <template #default="scope">
            <el-tag :type="scope.row.status == '1'
              ? 'success'
              : scope.row.status == '0'
                ? 'danger'
                : ''
              ">
              {{
                scope.row.status == "1"
                ? "已支付"
                : scope.row.status == "0"
                  ? "未支付"
                  : "未知"
              }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template #default="scope">
            <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-popconfirm title="确定要删除此订单" confirm-button-text="确定" cancel-button-text="取消"
              @confirm="handleDelete(scope.$index, scope.row)">
              <template #reference>
                <el-button size="small" type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog v-model="centerDialogVisible" title="订单编辑" width="40%">
        <div>
          <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" status-icon>
            <el-form-item label="订单编号" prop="ordernum">
              <el-input v-model="ruleForm.ordernum" />
            </el-form-item>
            <el-form-item label="订单名称" prop="ordername">
              <el-input v-model="ruleForm.ordername" />
            </el-form-item>
            <el-form-item label="下单用户" prop="userid">
              <el-input v-model="ruleForm.userId" />
            </el-form-item>
            <el-form-item label="价格" prop="price">
              <el-input v-model="ruleForm.price" />
            </el-form-item>
            <el-form-item label="订单状态" prop="status">
              <el-radio-group v-model="ruleForm.status">
                <el-radio :label="0">已支付</el-radio>
                <el-radio :label="1">未支付</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </div>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" @click="submitForm(ruleFormRef)">更新</el-button>
            <el-button @click="resetForm(ruleFormRef)">重置表单</el-button>
            <el-button @click="centerDialogVisible = false">取消</el-button>
          </span>
        </template>
      </el-dialog>
      <!-- <div class="pagination">
        <el-pagination background layout="total, prev, pager, next" :current-page="query.pageIndex"
          :page-size="query.pageSize" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
      </div> -->
      <div class="pagination">
        <el-pagination v-if="totalCount" v-model:currentPage="query.currentPage" v-model:page-size="query.pageSize"
          layout="prev, pager, next, jumper" :total="totalCount" @current-change="handleCurrentChange" />
      </div>
    </div>
  </div>
</template>
<script>
import { ref, reactive } from "vue";
import { ElMessageBox } from "element-plus";
import request from "../../utils/request";
import Editor from "@/components/Editor.vue";
import { ElNotification } from "element-plus";
export default {
  // components: {
  //     Editor,
  // },
  setup() {
    const ruleFormRef = ref();
    const tableData = ref([]);
    const totalCount = ref(0);
    const centerDialogVisible = ref(false);
    const form = reactive({
      content: "",
    });
    const query = reactive({
      ordername: "",
      currentPage: 1,
      pageSize: 5,
    });

    const ruleForm = reactive({
      userId: "",
      orderId: "",
      ordername: "",
      ordernum: "",
      price: "",
      status: 1,
    });

    // 查询操作
    const handleSearch = () => {
      getData();
    };
    // 分页导航
   
    // 删除操作
    const handleDelete = (index, row) => {
      request
        .request({
          url: "/order/delete",
          method: "get",
          params: {
            orderId: row.orderid,
          },
        })
        .then((res) => {
          console.log(res);
          if (res.data.msg == "success") {
            getData();
            ElNotification({
              title: "删除成功",
              message: "成功删除订单信息",
            });
          } else {
            ElNotification({
              title: "删除失败",
              message: "请联系管理员检查失败原因1",
            });
          }
        })
        .catch((e) => {
          ElNotification({
            title: "删除失败",
            message: "请联系管理员检查失败原因",
          });
        });
    };
    //修改操作
    // const handleEdit = (index) => {
    //     centerDialogVisible.value = true;
    //     // console.log(index, centerDialogVisible);
    // };
    const handleEdit = (index, row) => {
      console.log(row, 'rowrowrowrow');
      console.log(row.userId);
      centerDialogVisible.value = true;
      ruleForm.userId = row.userId;
      ruleForm.orderId = row.orderid
      console.log(ruleForm.userId);
      ruleForm.ordername = row.ordername;
      ruleForm.ordernum = row.ordernum;
      ruleForm.price = row.price;
      ruleForm.status = row.status;
      ruleForm.username = row.user.username;
    };
    const handleClose = (done) => {
      ElMessageBox.confirm("Are you sure to close this dialog?")
        .then(() => {
          done();
        })
        .catch(() => {
          // catch error
        });
    };
    // 获取表格数据
    // const getData = () => {
    //   request
    //     .request({ url: "/order/getAllOrders", method: "get" })
    //     .then((res) => {
    //       console.log(res.data.data);
    //       tableData.value = res.data.data;
    //       console.log(tableData.value)
    //       pageTotal.value = res.data.data.length || 50
    //     })
    //     .catch((e) => {
    //       console.log(e);
    //     });
    // };
    const getData = () => {
      request
        .request({
          url: "/order/getAllOrdersByPage",
          params: {
            ordername: query.ordername,
            currentPage: query.currentPage,
            pageSize: query.pageSize,
          },
          method: "get",
        })
        .then((res) => {
          //获取当前页的数据
          tableData.value = res.data.data.rows;
          //获取总记录数
          totalCount.value = res.data.data.count;
          console.log(res.data.data.count);
        })
        .catch((e) => {
          console.log(e);
        });
    };
    // const getDataByPage = () => {
    //   request
    //     .request({ 
    //       url: "/order/getAllOrdersByPage",
    //       params: {
    //         ordername: query.ordername,
    //         pageSize: query.pageSize,
    //         pageIndex: query.pageIndex
    //       },
    //       method: "get" 
    //     })
    //     .then((res) => {
    //       console.log(res.data.data);
    //       tableData.value = res.data.data;
    //       console.log(tableData.value)
    //       pageTotal.value = res.data.data.length || 50
    //       console.log(res);
    //       console.log( res.data.data.length);
    //     })
    //     .catch((e) => {
    //       console.log(e);
    //     });
    // };
    const handleCurrentChange = (val) => { 
          query.currentPage = val;
          getData();
          console.log(val);
        };
    getData();

    const submitForm = async (formEl) => {
      if (!formEl) return;
      console.log(ruleForm, 'sssssssaaaa')
      await formEl.validate((valid, fields) => {
        if (valid) {
          // console.log("提交更新", fields);
          request
            .request({
              url: "/order/update",
              method: "post",
              data: {
                orderId: ruleForm.orderId,
                ordername: ruleForm.ordername,
                ordernum: ruleForm.ordernum,
                price: ruleForm.price,
                status: ruleForm.status,
              },
            })
            .then((res) => {
              if (res.data.code == 200) {
                getData();
                ElNotification({
                  title: "更新成功",
                  message: "成功更新用户信息",
                });
              } else {
                ElNotification({
                  title: "更新失败",
                  message: "请联系管理员检查失败原因",
                });
              }
            })
            .catch((e) => {
              ElNotification({
                title: "更新失败",
                message: "请联系管理员检查失败原因",
              });
            });
        } else {
          ElNotification({
            title: "校验失败",
            message: "请重新填写信息",
          });
        }
      });
    };
    const resetForm = (formEl) => {
      if (!formEl) return;
      formEl.resetFields();
    };
    const rules = reactive({
      username: [
        {
          required: true,
          message: "请输入用户名",
          trigger: "blur",
        },
      ],
      password: [
        {
          required: true,
          message: "请输入密码",
          trigger: "blur",
        },
        {
          min: 1,
          max: 7,
          message: "长度大于1小于7",
          trigger: "blur",
        },
      ],
      phone: [
        {
          required: true,
          message: "请输入电话号码",
          trigger: "blur",
        },
      ],
      address: [
        {
          required: false,
          message: "请输入地址",
          trigger: "blur",
        },
      ],
      type: [
        {
          required: true,
          message: "请选择用户类型",
          trigger: "change",
        },
      ],
      status: [
        {
          required: true,
          message: "请选择用户状态",
          trigger: "change",
        },
      ],
    });

    return {
      query,
      resetForm,
      // pageTotal,
      totalCount,
      tableData,
      centerDialogVisible,
      form,
      rules,
      ruleForm,
      ruleFormRef,
      submitForm,
      getData,
      handleSearch,
      // handlePageChange,
      handleDelete,
      handleEdit,
      handleClose,
      // getDataByPage,
      handleCurrentChange
    };
  },
};
</script>
<style lang="scss" scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}

.table {
  width: 100%;
  font-size: 14px;
}

.red {
  color: #ff0000;
}

.mr10 {
  margin-right: 10px;
}

.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>